<template>
  <div class="community">
    <div class="personalProduce" v-if="!this.$route.query.mark" @touchend="produceTouch"></div>
    <div class="back" @touchend="backTouch"></div>
    <swiper class="community-main" :options="swiperOption" ref="listSwiper">
      <swiper-slide v-for="(pageList,pageIndex) in communityGroup" :key="pageIndex">
        <div class="communityBox" v-for="(item,index) in pageList" :key="index">
          <v-touch class="produceMain" @tap="communityTouch(item)" :style="produceStyle(item.content.content[0].scene)">
            <div v-for="imagery in item.content.content[0].imagery" :key="imagery.produceEryId"
              :style="imageryStyle(imagery)">
            </div>
            <div v-for="role in item.content.content[0].role" :key="role.produceRoleId+999" :style="roleStyle(role)">
            </div>
          </v-touch>
          <div class="head">
            <div class="icon"></div>
          </div>
          <div class="title">{{item.content.detail.picbookname}}</div>
          <span class="name">{{item.content.detail.nickname}}</span>
          <div class="praiseBox" @touchend.stop="praiseTouch(item)">
            <div class="praise" :style="praiseStyle(item)"></div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  data() {
    return {
      swiperOption: {
        speed: 500,
        longSwipesRatio: 0.15
      }
    }
  },
  created() {
    this.initCommunity()
  },
  computed: {
    communityGroup() {
      return this.split(this.communityList, 6)
    },
    //点赞图
    praiseStyle(item) {
      return function (item) {
        const background = this.collectionIdList.indexOf(item.id) > -1 ? "community/点赞-已点击.png" : "community/点赞-未点击.png"
        return {
          background: "url(" + this.variable.STATICE_URLTITLE + background + ")0 0/100% 100%"
        }
      }
    },
    //背景图
    produceStyle(scene) {
      return function (scene) {
        const background = scene ? scene : this.variable.STATICE_URLTITLE + "produce/默认场景.png"
        return {
          background: "url(" + background + ")0 0/100% 100%"
        }
      }
    },
    //意象样式
    imageryStyle(imagery) {
      return function (imagery) {
        return {
          position: "absolute",
          background: "url(" + imagery.eryImgInWorld + ")0 0/100% 100%",
          width: imagery.widthInWorld,
          height: imagery.heightInWorld,
          top: imagery.topInWorld,
          left: imagery.leftInWorld
        }
      }
    },
    //角色样式
    roleStyle(role) {
      return function (role) {
        return {
          position: "absolute",
          background: "url(" + role.imageUrl + ")0 0/100% 100%",
          width: role.width,
          height: role.height,
          top: role.topInWorld,
          left: role.leftInWorld
        }
      }
    },
    ...mapGetters("produceStatus", {
      communityList: "getCommunityList",
      userProduceList: "getUserProduceList",
      collectionIdList: "getCollectionIdList"
    })
  },
  methods: {
    //获取社区列表
    initCommunity: async function () {
      const [data, err] = await this.awaitWarp(this.$post(this.api.recPicbookList))
      data.picbooks.map(item => {
        item.content = JSON.parse(item.content)
        return item
      })
      this.setCommunityList(data.picbooks)
    },
    //点赞
    praiseTouch: function (item) {
      this.clickMusic()
      const index = this.collectionIdList.indexOf(item.id)
      index > -1 ? this.collectionIdList.splice(index, 1) : this.collectionIdList.push(item.id)
      this.userSaveDate("collectionIdList", this.collectionIdList)
    },
    //返回上一级
    backTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.go(-1)
        }
      })
    },
    //进入我的作品
    produceTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/personal/produce", query: { mark: true } })
        }
      })
    },
    //点击翻页
    nextTouch: function () {
      this.clickMusic()
      if (this.$refs.listSwiper.swiper.isEnd) {
        this.setPopup({
          content: "这是最后一页了哦"
        })
        return
      }
      this.$refs.listSwiper.swiper.slideNext()
    },
    //进入绘本
    communityTouch: function (item) {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/communityPicbook", query: { picbookId: item.id } })
        }
      })
    },
    ...mapActions("mainStatus", ["setLoading", 'setPopup']),
    ...mapActions("produceStatus", ["setCommunityList"])
  }
}
</script>

<style scoped lang="stylus">
.community
  position absolute
  width 100vw
  height 100vh
  background url($urlTitle + 'personals/背景.png') 0 0 / 100% 100%
  transform translate3d(calc(0px - var(--X)), calc(0px - var(--Y)), 0px)
  .back
    z-index 99
    background url($urlTitle + 'icon/返回.png') 0 0 / 100% 100%
    $coord('WHLT', 11vh, 13.8vh, 2rem, 1rem)
  .personalProduce
    $coord('WHRT', 11vh, 13.8vh, 2rem, 1rem)
    z-index 99
    background url($urlTitle + 'icon/我的作品.png') 0 0 / 100% 100%
  .community-main
    width 150vh
    height 80vh
    margin 18vh auto 0 auto
    max-width 90vw
    max-height 50vw
    min-width 75vw
    position relative
    .communityBox
      float left
      width 30%
      height 30vh
      margin 1.66%
      display flex
      flex-wrap wrap
      position relative
      transition all 0.3s
      background white
      border-radius 1vh
      filter drop-shadow(1px 1px 2px rgba(159, 154, 154, 0.3))
      .produceMain
        width 96%
        height 22vh
        margin 1vh 1vh 0 1vh
        border-radius 1vh
        position relative
      .title
        background url($urlTitle + 'community/绘本标题.png') 0 0 / 100% 100%
        $coord('WHRT', 10vh, 8vh, 0, 3vh)
        font-size 3vh
        $alignCenter()
        color white
        text-indent 0.3rem
        padding 0 3vh
        box-sizing border-box
        min-width 10vh
        width auto
      .head
        width 6vh
        height 6vh
        margin-left 2vh
        background url($urlTitle + 'personals/未登录-头像框背景.png') 0 0 / 100% 100%
        .icon
          width 5vh
          height 5vh
          margin 1vh 0 0 0.5vh
          background url($urlTitle + 'personals/未登录-头像.png') 0 0 / 100% 100%
      .name
        font-size 3vh
        color #ff9024
        margin 2vh 0 0 2vh
      .praiseBox
        width 8vh
        height 8vh
        margin-left auto
        .praise
          width 4vh
          height 3.5vh
          margin 1.5vh 0 0 1vh
</style>
